<template>
  <div class="zhima-ai">
    <ServiceNav />
    
    <!-- 顶部Banner -->
    <div class="hero-section">
      <div class="container">
        <div class="hero-content">
          <h1 class="hero-title">芝麻AI - 智能创作助手</h1>
          <p class="hero-subtitle">赋能内容创作，提升创作效率</p>
          <div class="hero-actions">
            <el-button type="primary" size="large" @click="startTrial">免费体验</el-button>
            <el-button size="large" @click="learnMore">了解更多</el-button>
          </div>
        </div>
        <div class="hero-image">
          <img src="@/assets/images/404.png" alt="芝麻AI智能助手">
        </div>
      </div>
    </div>
    
    <!-- 核心功能 -->
    <div class="features-section">
      <div class="container">
        <h2 class="section-title">核心功能</h2>
        <p class="section-desc">芝麻AI提供全方位的内容创作与管理解决方案</p>
        
        <div class="features-grid">
          <div class="feature-card" v-for="(feature, index) in features" :key="index">
            <div class="feature-icon">
              <el-icon :size="48"><component :is="feature.icon" /></el-icon>
            </div>
            <h3 class="feature-title">{{ feature.title }}</h3>
            <p class="feature-desc">{{ feature.description }}</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- AI能力展示 -->
    <div class="ai-showcase">
      <div class="container">
        <h2 class="section-title">强大的AI能力</h2>
        <p class="section-desc">基于大规模预训练模型，提供多元化的AI能力</p>
        
        <el-tabs class="ai-tabs" tab-position="left">
          <el-tab-pane v-for="(capability, index) in aiCapabilities" :key="index" :label="capability.name">
            <div class="capability-content">
              <div class="capability-info">
                <h3>{{ capability.name }}</h3>
                <p>{{ capability.description }}</p>
                <ul class="capability-features">
                  <li v-for="(feature, i) in capability.features" :key="i">
                    <el-icon><Check /></el-icon> {{ feature }}
                  </li>
                </ul>
                <el-button type="primary" @click="tryCapability(capability)">立即体验</el-button>
              </div>
              <div class="capability-image">
                <img :src="capability.image" :alt="capability.name">
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    
    <!-- 应用场景 -->
    <div class="use-cases">
      <div class="container">
        <h2 class="section-title">应用场景</h2>
        <p class="section-desc">芝麻AI可应用于多种业务场景，满足不同行业需求</p>
        
        <div class="use-cases-grid">
          <div class="use-case-card" v-for="(useCase, index) in useCases" :key="index">
            <div class="use-case-image">
              <img :src="useCase.image" :alt="useCase.title">
            </div>
            <div class="use-case-content">
              <h3>{{ useCase.title }}</h3>
              <p>{{ useCase.description }}</p>
              <el-tag v-for="(tag, i) in useCase.tags" :key="i" class="use-case-tag">{{ tag }}</el-tag>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 定价方案 -->
    <div class="pricing-section">
      <div class="container">
        <h2 class="section-title">灵活定价方案</h2>
        <p class="section-desc">满足不同规模企业和个人需求的多种定价方案</p>
        
        <div class="pricing-tabs">
          <el-radio-group v-model="pricingType" size="large">
            <el-radio-button label="monthly">月付方案</el-radio-button>
            <el-radio-button label="yearly">年付方案 (省20%)</el-radio-button>
          </el-radio-group>
        </div>
        
        <div class="pricing-cards">
          <div class="pricing-card" v-for="(plan, index) in pricingPlans" :key="index" :class="{'popular': plan.isPopular}">
            <div class="popular-badge" v-if="plan.isPopular">最受欢迎</div>
            <h3 class="plan-name">{{ plan.name }}</h3>
            <div class="plan-price">
              <span class="currency">¥</span>
              <span class="amount">{{ pricingType === 'yearly' ? plan.yearlyPrice : plan.monthlyPrice }}</span>
              <span class="period">/ {{ pricingType === 'yearly' ? '年' : '月' }}</span>
            </div>
            <p class="plan-desc">{{ plan.description }}</p>
            
            <ul class="plan-features">
              <li v-for="(feature, i) in plan.features" :key="i">
                <el-icon><Check /></el-icon> {{ feature }}
              </li>
            </ul>
            
            <el-button 
              type="primary" 
              class="plan-button" 
              :class="{'is-popular': plan.isPopular}"
              @click="selectPlan(plan)">
              {{ plan.isPopular ? '立即开始' : '选择方案' }}
            </el-button>
          </div>
        </div>
        
        <div class="custom-plan">
          <h3>需要定制方案？</h3>
          <p>我们为大型企业和特殊需求提供定制化解决方案</p>
          <el-button @click="contactSales">联系销售团队</el-button>
        </div>
      </div>
    </div>
    
    <!-- 常见问题 -->
    <div class="faq-section">
      <div class="container">
        <h2 class="section-title">常见问题</h2>
        
        <el-collapse class="faq-collapse">
          <el-collapse-item v-for="(faq, index) in faqs" :key="index" :title="faq.question" :name="index">
            <div v-html="faq.answer"></div>
          </el-collapse-item>
        </el-collapse>
        
        <div class="more-questions">
          <p>还有其他问题？</p>
          <el-button type="primary" plain @click="contactSupport">联系客服</el-button>
        </div>
      </div>
    </div>
    
    <!-- 注册横幅 -->
    <div class="cta-banner">
      <div class="container">
        <h2>立即开始使用芝麻AI，提升您的创作效率</h2>
        <p>7天免费试用，无需信用卡</p>
        <el-button type="primary" size="large" @click="startTrial">免费试用</el-button>
      </div>
    </div>
    
    <Footer />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { Check, Edit, VideoPlay, Picture, ChatLineRound, Connection, Monitor, Share, Trophy } from '@element-plus/icons-vue';
import ServiceNav from '@/components/ServiceNav.vue';
import Footer from '@/components/Footer.vue';

export default defineComponent({
  name: 'ZhimaAI',
  components: {
    ServiceNav,
    Footer,
    Check,
    Edit,
    VideoPlay,
    Picture,
    ChatLineRound,
    Connection,
    Monitor,
    Share,
    Trophy
  },
  setup() {
    const pricingType = ref('monthly');
    
    // 核心功能
    const features = [
      {
        icon: 'Edit',
        title: '智能文案创作',
        description: '一键生成高质量文案，支持多种风格和场景，满足各类内容创作需求'
      },
      {
        icon: 'ChatLineRound',
        title: '智能对话助手',
        description: '强大的对话能力，可以回答问题、提供建议、辅助决策，成为您的得力助手'
      },
      {
        icon: 'VideoPlay',
        title: '视频内容处理',
        description: '自动生成视频脚本、字幕，提取视频摘要，让视频创作更加高效'
      },
      {
        icon: 'Picture',
        title: '图像生成与处理',
        description: '基于文本描述生成图像，或对现有图像进行编辑、优化，释放创意潜能'
      },
      {
        icon: 'Connection',
        title: '多元知识集成',
        description: '结合行业知识和专业领域信息，提供更加精准、专业的内容创作支持'
      },
      {
        icon: 'Monitor',
        title: '内容质量监控',
        description: '自动检测内容质量，提供优化建议，确保创作内容符合规范和标准'
      }
    ];
    
    // AI能力展示
    const aiCapabilities = [
      {
        name: '文本生成',
        description: '基于先进的深度学习模型，实现高质量的文本生成，包括文章、产品描述、广告文案等',
        features: [
          '支持多种文体和风格',
          '可调节创作风格和语言风格',
          '提供修改和优化建议',
          '支持多语言创作'
        ],
        image: '@/assets/images/ai-text.png'
      },
      {
        name: '智能对话',
        description: '强大的对话系统，能够理解用户意图，提供准确、自然的回复，适用于客服、助手等场景',
        features: [
          '上下文理解能力',
          '情感识别与回应',
          '多轮对话记忆',
          '可定制专业领域知识'
        ],
        image: '@/assets/images/ai-chat.png'
      },
      {
        name: '图像创作',
        description: '将文字描述转化为图像，或根据参考图进行二次创作，满足各类设计和创意需求',
        features: [
          '文本到图像生成',
          '图像风格迁移',
          '图像修复与增强',
          '支持多种分辨率和比例'
        ],
        image: '@/assets/images/ai-image.png'
      },
      {
        name: '多模态融合',
        description: '融合文本、图像、音频等多种模态，实现更全面的内容理解和生成能力',
        features: [
          '跨模态内容理解',
          '文本与图像协同创作',
          '视频内容理解与生成',
          '多模态数据分析'
        ],
        image: '@/assets/images/ai-multimodal.png'
      }
    ];
    
    // 应用场景
    const useCases = [
      {
        title: '内容营销',
        description: '快速生成高质量营销文案、社交媒体内容、邮件推广等，提升营销效率',
        image: '@/assets/images/usecase-marketing.png',
        tags: ['营销文案', '社交媒体', '广告创意']
      },
      {
        title: '电商运营',
        description: '自动生成产品描述、标题优化、评价分析，增强产品吸引力',
        image: '@/assets/images/usecase-ecommerce.png',
        tags: ['产品描述', '标题优化', '用户评价分析']
      },
      {
        title: '教育培训',
        description: '辅助课程内容创作、知识点提取、学习资料生成，提升教学质量',
        image: '@/assets/images/usecase-education.png',
        tags: ['课程设计', '学习资料', '知识提取']
      },
      {
        title: '个人创作',
        description: '为个人创作者提供灵感、辅助写作、内容优化，激发创作潜能',
        image: '@/assets/images/usecase-personal.png',
        tags: ['写作助手', '创意灵感', '内容优化']
      }
    ];
    
    // 定价方案
    const pricingPlans = [
      {
        name: '基础版',
        monthlyPrice: 99,
        yearlyPrice: 948,
        description: '适合个人用户和小型创作团队',
        features: [
          '基础AI模型访问',
          '每日50次请求限制',
          '标准响应速度',
          '基础技术支持',
          '2个项目空间'
        ],
        isPopular: false
      },
      {
        name: '专业版',
        monthlyPrice: 299,
        yearlyPrice: 2868,
        description: '适合专业创作者和中小企业',
        features: [
          '高级AI模型访问',
          '每日200次请求限制',
          '优先响应速度',
          '优先技术支持',
          '10个项目空间',
          '高级模板库',
          'API访问'
        ],
        isPopular: true
      },
      {
        name: '企业版',
        monthlyPrice: 999,
        yearlyPrice: 9588,
        description: '适合大型企业和团队使用',
        features: [
          '顶级AI模型访问',
          '无限请求次数',
          '最高响应速度',
          '24/7专属技术支持',
          '无限项目空间',
          '完整模板库',
          'API高级访问',
          '定制化训练',
          '数据私有化部署'
        ],
        isPopular: false
      }
    ];
    
    // 常见问题
    const faqs = [
      {
        question: '芝麻AI如何保护我的数据隐私？',
        answer: '我们非常重视用户数据隐私。芝麻AI采用先进的加密技术保护您的数据，严格遵守数据保护法规。您的所有内容仅用于提供服务，不会被用于其他目的，也不会被分享给第三方。企业版客户还可以选择私有化部署，确保数据安全。'
      },
      {
        question: '我可以将芝麻AI生成的内容用于商业用途吗？',
        answer: '是的，您可以将芝麻AI生成的内容用于商业用途。根据我们的服务条款，一旦内容生成，您将拥有这些内容的完全使用权。但请注意，您仍需遵守相关法规，确保生成的内容不侵犯他人知识产权或包含不当内容。'
      },
      {
        question: '芝麻AI支持哪些语言？',
        answer: '芝麻AI目前支持中文、英文、日文、韩文等多种语言，并且我们正在不断扩展支持的语言范围。中文是我们的优势语言，拥有最全面和深入的支持。'
      },
      {
        question: '免费试用期结束后会自动扣费吗？',
        answer: '不会。免费试用期结束后，您的账户会自动转为免费版，具有一定的功能限制和使用次数限制。只有当您主动选择升级到付费方案时，才会产生费用。我们会在试用期结束前发送提醒邮件。'
      },
      {
        question: '如何取消订阅？',
        answer: '您可以随时在账户设置中取消订阅。取消后，您可以继续使用当前计费周期内的服务，直到周期结束。之后，您的账户会转为免费版。我们不提供部分退款，但您可以联系客服团队解决特殊情况。'
      }
    ];
    
    // 方法
    const startTrial = () => {
      // 实现免费试用逻辑
    };
    
    const learnMore = () => {
      // 实现了解更多逻辑
    };
    
    const tryCapability = (capability) => {
      // 实现体验特定能力的逻辑
    };
    
    const selectPlan = (plan) => {
      // 实现选择方案的逻辑
    };
    
    const contactSales = () => {
      // 实现联系销售的逻辑
    };
    
    const contactSupport = () => {
      // 实现联系客服的逻辑
    };

    return {
      pricingType,
      features,
      aiCapabilities,
      useCases,
      pricingPlans,
      faqs,
      startTrial,
      learnMore,
      tryCapability,
      selectPlan,
      contactSales,
      contactSupport
    };
  }
});
</script>

<style lang="scss" scoped>
.zhima-ai {
  padding-top: 0px;
}

.container {
  max-width: $container-width;
  margin: 0 auto;
  padding: 0 $spacing-base;
}

.section-title {
  font-size: $font-size-extra-large;
  color: $text-primary;
  text-align: center;
  margin-bottom: $spacing-base;
}

.section-desc {
  font-size: $font-size-medium;
  color: $text-secondary;
  text-align: center;
  margin-bottom: $spacing-extra-large;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

// 顶部Banner
.hero-section {
  padding: $spacing-extra-large 0;
  background: linear-gradient(135deg, #1890ff 0%, #36a9e1 100%);
  color: white;
  
  .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    @media (max-width: 768px) {
      flex-direction: column;
      text-align: center;
    }
  }
  
  .hero-content {
    flex: 1;
    padding-right: $spacing-extra-large;
    
    @media (max-width: 768px) {
      padding-right: 0;
      margin-bottom: $spacing-extra-large;
    }
  }
  
  .hero-image {
    flex: 1;
    text-align: center;
    
    img {
      max-width: 100%;
      height: auto;
      border-radius: $border-radius-base;
      box-shadow: $box-shadow-base;
    }
  }
  
  .hero-title {
    font-size: 42px;
    font-weight: bold;
    margin-bottom: $spacing-base;
  }
  
  .hero-subtitle {
    font-size: 24px;
    margin-bottom: $spacing-large;
    opacity: 0.9;
  }
  
  .hero-actions {
    display: flex;
    gap: $spacing-base;
    
    @media (max-width: 768px) {
      justify-content: center;
    }
  }
}

// 核心功能
.features-section {
  padding: $spacing-extra-large 0;
  background-color: $background-color-white;
  
  .features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: $spacing-large;
    
    @media (max-width: 992px) {
      grid-template-columns: repeat(2, 1fr);
    }
    
    @media (max-width: 576px) {
      grid-template-columns: 1fr;
    }
  }
  
  .feature-card {
    background-color: $background-color-white;
    border-radius: $border-radius-base;
    padding: $spacing-large;
    box-shadow: $box-shadow-light;
    transition: $transition-base;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: $box-shadow-base;
    }
    
    .feature-icon {
      color: $primary-color;
      margin-bottom: $spacing-base;
    }
    
    .feature-title {
      font-size: $font-size-large;
      color: $text-primary;
      margin-bottom: $spacing-small;
    }
    
    .feature-desc {
      color: $text-regular;
      line-height: 1.6;
    }
  }
}

// AI能力展示
.ai-showcase {
  padding: $spacing-extra-large 0;
  background-color: $background-color-base;
  
  .ai-tabs {
    background-color: $background-color-white;
    border-radius: $border-radius-base;
    box-shadow: $box-shadow-light;
    
    :deep(.el-tabs__content) {
      padding: $spacing-large;
    }
  }
  
  .capability-content {
    display: flex;
    gap: $spacing-extra-large;
    
    @media (max-width: 768px) {
      flex-direction: column;
    }
  }
  
  .capability-info {
    flex: 1;
    
    h3 {
      font-size: $font-size-large;
      color: $text-primary;
      margin-bottom: $spacing-base;
    }
    
    p {
      color: $text-regular;
      line-height: 1.6;
      margin-bottom: $spacing-base;
    }
    
    .capability-features {
      margin-bottom: $spacing-large;
      
      li {
        display: flex;
        align-items: center;
        margin-bottom: $spacing-small;
        color: $text-regular;
        
        .el-icon {
          color: $success-color;
          margin-right: $spacing-small;
        }
      }
    }
  }
  
  .capability-image {
    flex: 1;
    
    img {
      max-width: 100%;
      border-radius: $border-radius-base;
      box-shadow: $box-shadow-light;
    }
  }
}

// 应用场景
.use-cases {
  padding: $spacing-extra-large 0;
  background-color: $background-color-white;
  
  .use-cases-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: $spacing-large;
    
    @media (max-width: 768px) {
      grid-template-columns: 1fr;
    }
  }
  
  .use-case-card {
    display: flex;
    background-color: $background-color-white;
    border-radius: $border-radius-base;
    overflow: hidden;
    box-shadow: $box-shadow-light;
    transition: $transition-base;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: $box-shadow-base;
    }
    
    @media (max-width: 576px) {
      flex-direction: column;
    }
  }
  
  .use-case-image {
    flex: 1;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    @media (max-width: 576px) {
      height: 200px;
    }
  }
  
  .use-case-content {
    flex: 1;
    padding: $spacing-large;
    
    h3 {
      font-size: $font-size-large;
      color: $text-primary;
      margin-bottom: $spacing-small;
    }
    
    p {
      color: $text-regular;
      line-height: 1.6;
      margin-bottom: $spacing-base;
    }
    
    .use-case-tag {
      margin-right: $spacing-small;
      margin-bottom: $spacing-small;
    }
  }
}

// 定价方案
.pricing-section {
  padding: $spacing-extra-large 0;
  background-color: $background-color-base;
  
  .pricing-tabs {
    text-align: center;
    margin-bottom: $spacing-large;
  }
  
  .pricing-cards {
    display: flex;
    justify-content: center;
    gap: $spacing-large;
    margin-bottom: $spacing-extra-large;
    
    @media (max-width: 992px) {
      flex-direction: column;
      align-items: center;
    }
  }
  
  .pricing-card {
    background-color: $background-color-white;
    border-radius: $border-radius-base;
    padding: $spacing-large;
    box-shadow: $box-shadow-light;
    width: 300px;
    position: relative;
    transition: $transition-base;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: $box-shadow-base;
    }
    
    &.popular {
      border: 2px solid $primary-color;
      padding-top: $spacing-extra-large;
    }
    
    .popular-badge {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: $primary-color;
      color: white;
      padding: 4px $spacing-base;
      border-radius: 20px;
      font-size: $font-size-small;
    }
    
    .plan-name {
      font-size: $font-size-large;
      color: $text-primary;
      text-align: center;
      margin-bottom: $spacing-small;
    }
    
    .plan-price {
      text-align: center;
      margin-bottom: $spacing-base;
      
      .currency {
        font-size: $font-size-large;
        vertical-align: top;
      }
      
      .amount {
        font-size: 36px;
        font-weight: bold;
        color: $text-primary;
      }
      
      .period {
        font-size: $font-size-small;
        color: $text-secondary;
      }
    }
    
    .plan-desc {
      text-align: center;
      color: $text-secondary;
      margin-bottom: $spacing-large;
    }
    
    .plan-features {
      margin-bottom: $spacing-large;
      
      li {
        display: flex;
        align-items: center;
        margin-bottom: $spacing-small;
        color: $text-regular;
        
        .el-icon {
          color: $success-color;
          margin-right: $spacing-small;
        }
      }
    }
    
    .plan-button {
      width: 100%;
      
      &.is-popular {
        background-color: $primary-color;
        border-color: $primary-color;
      }
    }
  }
  
  .custom-plan {
    text-align: center;
    padding: $spacing-large;
    background-color: $background-color-white;
    border-radius: $border-radius-base;
    max-width: 600px;
    margin: 0 auto;
    
    h3 {
      font-size: $font-size-large;
      color: $text-primary;
      margin-bottom: $spacing-small;
    }
    
    p {
      color: $text-regular;
      margin-bottom: $spacing-base;
    }
  }
}

// 常见问题
.faq-section {
  padding: $spacing-extra-large 0;
  background-color: $background-color-white;
  
  .faq-collapse {
    max-width: 800px;
    margin: 0 auto $spacing-extra-large;
  }
  
  .more-questions {
    text-align: center;
    
    p {
      color: $text-regular;
      margin-bottom: $spacing-base;
    }
  }
}

// 注册横幅
.cta-banner {
  padding: $spacing-extra-large 0;
  background: linear-gradient(135deg, #1890ff 0%, #36a9e1 100%);
  color: white;
  text-align: center;
  
  h2 {
    font-size: $font-size-extra-large;
    margin-bottom: $spacing-small;
  }
  
  p {
    font-size: $font-size-medium;
    margin-bottom: $spacing-large;
    opacity: 0.9;
  }
}
</style> 